<%--
  Created by IntelliJ IDEA.
  User: 24207
  Date: 2020/5/19
  Time: 15:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>接收物资列表</title>
    <!-- 引入JQuery-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入bootstrap样式 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style type="text/css">
        body{
            background-image: linear-gradient(to right,#f2dede,#a6e1ec);
        }
    </style>
</head>
<body>
<!-- 捐赠物资插入模态框 -->
<div class="modal fade" id="recieveGoodsInsertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myInsertModalLabel">接收物资插入</h4>
            </div>
            <div class="modal-body">
                <!--- 内联表单 -->
                <form class="form-horizontal" id="recieveGoods_insert_form">
                    <div class="form-group">
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">物资名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_name_insert_input" name="name" placeholder="recieveGoodsName">
                        </div>
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">接收者名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="donator_name_update_input" name="person.name" placeholder="recieveGoodsName">
                        </div>
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">规格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_speci_insert_input" name="speci" placeholder="recieveGoodsSpeci">
                        </div>
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">单位</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_unit_insert_input" name="unit" placeholder="recieveGoodsUnit">
                        </div>
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">数量</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_amount_insert_input" name="amount" placeholder="recieveGoodsAmount">
                        </div>
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">日期</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_date_insert_input" name="date" placeholder="recieveGoodsDate">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="recieveGoods_insert_btn">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 接收物资更新模态框 -->
<div class="modal fade" id="recieveGoodsUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myUpdateModalLabel">接收物资更新</h4>
            </div>
            <div class="modal-body">
                <!--- 内联表单 -->
                <form class="form-horizontal" id="recieveGoods_update_form">
                    <div class="form-group">
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">物资名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_name_update_input" name="name" placeholder="recieveGoodsName">
                        </div>
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">规格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_speci_update_input" name="speci" placeholder="recieveGoodsSpeci">
                        </div>
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">单位</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_unit_update_input" name="unit" placeholder="recieveGoodsUnit">
                        </div>
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">数量</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_amount_update_input" name="amount" placeholder="recieveGoodsAmount">
                        </div>
                        <label for="recieveGoods_update_form" class="col-sm-2 control-label">日期</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="recieveGoods_date_update_input" name="date" placeholder="recieveGoodsDate">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="recieveGoods_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>
<%-- 页面顶部留白 --%>
<div class="container">
    <div class="row" style="height: 5%"></div>
</div>
<nav class="navbar navbar-default" role="navigation" style="background:#bdbdbd">
    <div class="container">
    <!-- 导航条 -->
        <div class="row">
            <div class="col-md-11">
                <ul class="nav nav-pills">
                    <li role="presentation"><a href="donateGoods">捐赠物资</a></li>
                    <li role="presentation" class="active"><a href="recieveGoods" >接收物资</a></li>
                    <li role="presentation"><a href="donator">捐赠者</a></li>
                    <li role="presentation"><a href="reciever" >接收者</a></li>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="turnToSearch"><span class="glyphicon glyphicon-search"></span>搜索</a></li>
                        <li><a href="mine"><span class="glyphicon glyphicon-user"></span><span id="username"></span></a></li>
                        <li><a href="logout"><span class="glyphicon glyphicon-log-in"></span> 注销</a></li>
                    </ul>
                </ul>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-lg-8">
            <strong style="font-size: 20px">接收物资</strong>
            <button class="btn btn-primary btn-lg insert-btn col-md-offset-8">新增</button>
        </div>
    </div>
    <div class="row">
        </br>
    </div>
    <div class="row">
        <div class="col-md-8">
            <table class="table table-hover">
                <tr>
                    <td>ID</td>
                    <td>接收者</td>
                    <td>名称</td>
                    <td>规格</td>
                    <td>单位</td>
                    <td>数量</td>
                    <td>日期</td>
                    <td>操作</td>
                </tr>
                <c:forEach items="${list}" var="goods">
                <tr>
                    <td>${goods.id}</td>
                    <td>${goods.person.name}</td>
                    <td>${goods.name}</td>
                    <td>${goods.speci}</td>
                    <td>${goods.unit}</td>
                    <td>${goods.amount}</td>
                    <td>${goods.date}</td>
                    <td>
                        <button class="btn btn-success edit-btn">编辑</button>
                        <button class="btn btn-danger del-btn">删除</button>
                    </td>
                </tr>
                </c:forEach>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8">
            <!-- 分页信息-->
            当前 ${pageInfo.pageNum} 页,总
            ${pageInfo.pages} 页,共
            ${pageInfo.total} 条记录
            <!-- 分页导航条 -->
            <div id="page_nav_area" class="col-lg-offset-8"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $().ready(function(){
        //进入页面后，首先获取token信息
        get_token();
        //构建分页条
        build_page_nav();
    })
    //发送ajax请求，获取token
    function get_token(){
        $.ajax({
            url:"getToken",
            type:"GET",
            dataType:"JSON",
            success:function(result){
                //将返回的用户信息保存在token中
                var token = result;
                //打印登录用户
                console.log(token);
                //打印登录用户的id
                console.log(token.id);
                document.getElementById('username').innerText = "用户名:"+token.username;
            }
        });
    }
    //页面跳转函数
    function to_page(page){
        var temp = document.createElement("form");
        temp.action="recieveGoods?pn=" + page;
        temp.method="get"
        temp.style.display = "none";

        var opt = document.createElement("textarea");
        opt.name = "pn";
        opt.value = page;
        temp.appendChild(opt);

        document.body.appendChild(temp);
        temp.submit();
    }
    // 构建分页条
    function build_page_nav(){
        var pageInfo = '${pageInfo}';
        pageInfo = eval('(' + pageInfo + ')');
        //console.log(pageInfo);
        $("#page_nav_area").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
        var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;").attr("href","#"));
        if(pageInfo.hasPreviousPage === false){
            firstPageLi.addClass("disabled");
            prePageLi.addClass("disabled");
        }
        var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;").attr("href","#"));
        var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
        if(pageInfo.hasNextPage == false){
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        }
        //为元素添加点击翻页的事件
        firstPageLi.click(function(){
            //跳转到第一页
            to_page(1);
        });
        prePageLi.click(function(){
            //跳转到前一页
            to_page(pageInfo.pageNum-1)
        });
        lastPageLi.click(function(){
            //跳转到最后一页
            to_page(pageInfo.pages);
        });
        nextPageLi.click(function(){
            //跳转到下一页
            to_page(pageInfo.pageNum+1)
        });
        //添加首页和前页的提示
        ul.append(firstPageLi).append(prePageLi);
        //遍历给ul中添加页码提示
        $.each(pageInfo.navigatepageNums,function(index,item){
            var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
            if(pageInfo.pageNum == item){
                numLi.addClass("active");
            }
            numLi.click(function(){
                to_page(item);
            })
            ul.append(numLi);
        })
        //添加下一页和末页的提示
        ul.append(nextPageLi).append(lastPageLi);
        //将ul填入到nav中
        var navEle = $("<nav></nav>").append(ul);
        navEle.appendTo("#page_nav_area");
    }
    //删除捐赠物资
    $(document).on("click",".del-btn",function(){
        // 获取接收物资id
        var id = $(this).parents("tr").find("td:eq(0)").text();
        // 发送删除捐赠物资请求，并传递id
        var temp = document.createElement("form");
        temp.action="deleteRecieveGoods";
        temp.method="post"
        temp.style.display = "none";

        var opt = document.createElement("textarea");
        opt.name = "id";
        opt.value = id;
        temp.appendChild(opt);

        document.body.appendChild(temp);
        temp.submit();
    });
    <!-- 编辑按钮事件绑定,弹出模态框,获取捐赠者信息 -->
    $(document).on("click",".edit-btn",function(){
        //点击编辑按钮，打开模态框
        $("#recieveGoodsUpdateModal").modal({
            backdrop : "static"
        });
        //将账户id值传递给更新按钮
        var btn_id = $(this).parents("tr").find("td:eq(0)").text();
        $("#recieveGoods_update_btn").attr("btn-id",btn_id);
        //获取reciever属性值，并将文本框的默认值设为相应属性值
        get_recieveGoods(btn_id);
    });

    //获取接收者数据,并回显在输入框中
    function get_recieveGoods(id){
        $.ajax({
            url:"findRecieveGoodsById/?id=" + id,
            type:"GET",
            dataType:"JSON",
            success:function(result){
                //数据回显，将输入框name设为原值
                $("#recieveGoods_name_update_input").val(result.extend.recieveGoods.name);
                $("#recieveGoods_speci_update_input").val(result.extend.recieveGoods.speci);
                $("#recieveGoods_unit_update_input").val(result.extend.recieveGoods.unit);
                $("#recieveGoods_amount_update_input").val(result.extend.recieveGoods.amount);
                $("#recieveGoods_date_update_input").val(result.extend.recieveGoods.date);
            }
        });
    }

    //点击更新按钮,更新数据
    $("#recieveGoods_update_btn").click(function(){
        var form = $("#recieveGoods_update_form").serialize();
        var id = $(this).attr("btn-id");
        //发送ajax请求更新员工
        $.ajax({
            url:"updateRecieveGoods?id=" + id,
            type:"POST",
            data:form,
            success:function(result){
                //员工更新成功
                //1.关闭模块框
                $("#recieveGoodsUpdateModal").modal('hide');
                //发送donator请求
                var temp = document.createElement("form");
                temp.action = "recieveGoods";
                temp.method = "Get";

                document.body.appendChild(temp);
                temp.submit();
            }
        });
    });
    <!-- 新增按钮事件绑定,弹出模态框 -->
    $(document).on("click",".insert-btn",function(){
        //点击编辑按钮，打开模态框
        $("#recieveGoodsInsertModal").modal({
            backdrop : "static"
        });
    });

    //点击新增按钮,添加数据
    $("#recieveGoods_insert_btn").click(function(){
        var form = $("#recieveGoods_insert_form").serialize();
        //发送ajax请求更新员工
        $.ajax({
            url:"insertRecieveGoods",
            type:"POST",
            data:form,
            success:function(result){
                //员工更新成功
                //1.关闭模块框.
                $("#recieveGoodsInsertModal").modal('hide');
                //发送donator请求
                var temp = document.createElement("form");
                temp.action = "recieveGoods";
                temp.method = "Get";

                document.body.appendChild(temp);
                temp.submit();
            }
        });
    });
</script>
</body>
</html>
